<link href="./pages/example/map/map.css" rel="stylesheet" type="text/css">
<div id="map1">
    <el-tabs v-model="tabName" @tab-click=handleClick>
        <el-tab-pane label="网格地图划分" name="first" v-if="GridTab">
            <div style="margin-left: 10px;float: left">
                <el-input placeholder="输入位置关键字快速定位" v-model="cityName" style="width: 400px;height: 30px;">
                    <el-button slot="append" type="danger" icon="el-icon-search" @click="theLocation()"></el-button>
                </el-input>
            </div>
            <div style="float: right;">
                <el-link type="primary" @click="showTool()" style="font-size: 22px"><i class="el-icon-share"></i>创建网格
                </el-link>

                <el-link type="primary" @click="editPolygon()" style="font-size: 22px" v-if="gridModifyButton"><i class="el-icon-edit"></i>修改网格
                </el-link>

            </div>
            <div id="allmap">
            </div>
            <el-dialog-x title="创建建筑物信息" :modal="false" :append-to-body="true" :visible.sync="configdialogVisible"
                         width="450px" style="margin-left: -45%">
                <!--        <el-form-x ref="configform" :group-fields="configFields" label-width="100px"></el-form-x>  -->
                <el-row :gutter="10">
                    <el-col :span="20">
                        <yu-xform ref="configdialogVisible" label-width="150px" form-type="edit"
                                  v-model="createFormdata" :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="网格级别" v-model="createFormdata.gridLevel" name="gridLevel"
                                               data-code="GRID_LEVEL" :disabled="true" ctype="select"
                                               placeholder="选择建筑物所归属的网格名称"></yu-xform-item>
                                <yu-xform-item label="上级网格" v-model="createFormdata.upGrid" name="upGrid" ctype="input"
                                               placeholder="选择建筑物所归属的网格名称" :disabled="true"></yu-xform-item>
                                <yu-xform-item label="上级网格ID" v-model="createFormdata.upGridId" name="upGridId"
                                               ctype="input" placeholder="上级网格编号" v-if="false"></yu-xform-item>
                                <!--                                <yu-xform-item label="网格类型" v-model="createFormdata.gridType" name="gridType" ctype="select"  data-code="GRID_BUILDING_TYPE" placeholder="请选择"></yu-xform-item>-->
                                <yu-xform-item label="场景属性" v-model="createFormdata.scenePro" name="scenePro"
                                               ctype="select" data-code="GRID_BUILDING_TYPE"
                                               placeholder="请选择"></yu-xform-item>
                                <yu-xform-item label="建筑物名称" v-model="createFormdata.buildName" name="buildName"
                                               ctype="input" placeholder="请输入"></yu-xform-item>
                                <yu-xform-item label="经度" v-model="createFormdata.longitude" name="longitude"
                                               ctype="input" placeholder="取点联动" :disabled="true"></yu-xform-item>
                                <yu-xform-item label="纬度" v-model="createFormdata.latitude" name="latitude"
                                               ctype="input" placeholder="取点联动" :disabled="true"></yu-xform-item>

                            </yu-xform-group>
                        </yu-xform>
                    </el-col>
                </el-row>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="sureConfig" v-loading="loadingA">保 存</el-button>
                    <el-button @click="cancelGridFn">取 消</el-button>
                </div>
            </el-dialog-x>
            <el-dialog-x :title="buildMap[dialogStatus]" :visible.sync="gridVisible" width="450px"
                         style="margin-left: -45%">
                <el-row :gutter="10">
                    <el-col :span="20">
                        <yu-xform ref="gridVisible" label-width="150px" form-type="edit" v-model="createGridFormdata"
                                  :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="网格级别" v-model="createGridFormdata.gridLevel" name="gridLevel"
                                               data-code="GRID_LEVEL" :disabled="true" ctype="select"
                                               placeholder="请选择（一级、二级、三级）"></yu-xform-item>
                                <yu-xform-item label="上级网格" v-model="createGridFormdata.upGrid" name="upGrid"
                                               ctype="input" placeholder="上级网格" :disabled="true"></yu-xform-item>
                                <yu-xform-item label="上级网格ID" v-model="createGridFormdata.upGridId" name="upGridId"
                                               ctype="input" placeholder="上级网格编号" v-if="showUpGridId"></yu-xform-item>
                                <yu-xform-item label="网格机构" v-model="createGridFormdata.orgId" name="upGridId"
                                               ctype="input" placeholder="网格机构" v-if="false"></yu-xform-item>
                                <yu-xform-item label="网格名称" v-model="createGridFormdata.gridNameOrg" name="gridNameOrg"
                                               ctype="yufp-org-tree" placeholder="请选择" v-if="showGridNameOrg"
                                               @select-fn="getOrgID"></yu-xform-item>
                                <yu-xform-item label="网格名称" v-model="createGridFormdata.gridName" name="gridName"
                                               ctype="input" placeholder="请输入" v-if="showGridName"></yu-xform-item>
                                <yu-xform-item label="网格类别" v-model="createGridFormdata.gridType" name="gridType"
                                               data-code="GRID_TYPE" ctype="select" placeholder="选择社区、商圈、村落"
                                               v-if="showGridType"></yu-xform-item>
                                <yu-xform-item label="网格经度" v-model="createGridFormdata.longitude" name="longitude"
                                               ctype="input" placeholder="取点联动" :disabled="true"></yu-xform-item>
                                <yu-xform-item label="网格纬度" v-model="createGridFormdata.latitude" name="latitude"
                                               ctype="input" placeholder="取点联动" :disabled="true"></yu-xform-item>
                                <yu-xform-item label="备注" v-model="createGridFormdata.sectionid" name="sectionid"
                                               ctype="input" placeholder="建立多个同名一级网格需进行备注"
                                               v-if="showSec"></yu-xform-item>
                            </yu-xform-group>
                        </yu-xform>
                    </el-col>
                </el-row>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="saveGrid" v-loading="loadingB">保 存</el-button>
                    <el-button @click="cancelGridFn">取 消</el-button>
                </div>
            </el-dialog-x>
            <el-dialog-x title="选择网格" :visible.sync="chooseGridVisible" width="450px">
                <el-row :gutter="10">
                    <el-col :span="20">
                        <yu-xform ref="chooseGridVisible" label-width="150px" form-type="edit"
                                  v-model="chooseGridFormdata" :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="网格名称" name="gridName" ctype="select" :options="stsOptions"
                                               v-model="chooseGridFormdata.gridName" @change="onSelectedChange">
                                </yu-xform-item>
                                <!--                                <yu-xform-item label="网格名称">-->
                                <!--                                    <yu-select v-model="chooseGridFormdata.gridName" placeholder="请选择活动区域"-->
                                <!--                                               prop="gridName">-->
                                <!--                                        <yu-option v-for="item in stsOptions" :key="item.key" :value="item.key"-->
                                <!--                                                   :label="item.value">-->
                                <!--                                        </yu-option>-->
                                <!--                                        &lt;!&ndash;                                        <yu-option label="区域一" value="shanghai"></yu-option>&ndash;&gt;-->
                                <!--                                        &lt;!&ndash;                                        <yu-option label="区域二" value="beijing"></yu-option>&ndash;&gt;-->
                                <!--                                    </yu-select>-->
                                <!--                                </yu-xform-item>-->
                                <yu-xform-item label="备注" name="sectionid" ctype="select" :options="secOptions"
                                               v-model="chooseGridFormdata.sectionid" v-if="showSec">
                                </yu-xform-item>
                            </yu-xform-group>
                        </yu-xform>
                        <!--                        <el-form ref="chooseGridVisible" v-model="chooseGridFormdata" label-width="150px">-->
                        <!--                            <el-form-item label="网格名称">-->
                        <!--&lt;!&ndash;                                <el-select v-model="gridName" placeholder="请选择" @change="onSelectedChange($event, item)">&ndash;&gt;-->
                        <!--                                <el-select v-model="gridName" placeholder="请选择">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in stsOptions"-->
                        <!--                                            :key="item.value"-->
                        <!--                                            :label="item.label"-->
                        <!--                                            :value="item.value">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-form>-->
                    </el-col>
                </el-row>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="sureShow">确 定</el-button>
                    <el-button @click="cancelGridFn">取 消</el-button>
                </div>
            </el-dialog-x>
        </el-tab-pane>
        <el-tab-pane label="网格信息配置" name="second" v-if="GridInfoTab">
            <div class="blank_template">
                <el-row :gutter="20">
                    <el-col :span="treeWith">
                        <div style="background-color: #fff;border: 1px solid rgba(233, 233, 233, 1)">
                            <div class="treeTitle">
                                <span style="font-weight: 650;">机构树</span>
                            </div>
                            <yufp-ext-tree style="height: 715px" ref="orgTree" @node-click="nodeClickFn"
                                           :data-url="treeUrlRel" data-id="orgId"
                                           data-label="orgName" data-pid="upOrgId" :data-root="dataRoot"
                                           :data-params="dataParams" lazy>
                            </yufp-ext-tree>
                        </div>
                    </el-col>
                    <el-col :span="24-treeWith">
                        <div class="loanAcctTitle">
                            <yu-xform ref="gridInfoSearch" related-table-name="girdInfoTable" form-type="search"
                                      :custom-search-fn="searchFn">
                                <yu-xform-group class="loanAcctSearchGroup" :column="3">
                                    <yu-xform-item label="网格名称" placeholder="网格名称" name="gridName"
                                                   ctype="input"></yu-xform-item>
                                    <yu-xform-item label="网格类型" placeholder="网格类型" name="gridType" data-code="GRID_TYPE"
                                                   ctype="select"></yu-xform-item>
                                    <yu-xform-item label="归属机构" placeholder="网格归属机构" ctype="yufp-org-tree"
                                                   name="orgId"></yu-xform-item>
                                    <yu-xform-item label="网格人员" placeholder="网格人员" ctype="yufp-mgr-selector"
                                                   name="userName"></yu-xform-item>
                                    <yu-xform-item label="网格级别" placeholder="网格级别" name="girdLevel"
                                                   data-code="GRID_LEVEL"
                                                   ctype="select"></yu-xform-item>
                                </yu-xform-group>
                            </yu-xform>
                        </div>
                        <div class="teachCorpSumBody" style="background-color: #fff">
                            <div style="margin-bottom: 5px;background-color: #fff">
                                <el-button class="exportButton" @click="baseInfoClickFn" type="primary" v-if="gridInfoButton">基础信息修改
                                </el-button>
                                <el-button class="exportButton" @click="mgrFPFn" type="primary" v-if="distributeMgrButton">分配客户经理
                                </el-button>
<!--                                <el-button class="exportButton" @click="uploadFn" type="primary">上传-->
<!--                                </el-button>-->
                            </div>
                            <yu-xtable class="loanAcctTable" ref="girdInfoTable" request-type="get" row-number
                                       :data-url="dataUrl" :pageable=true selection-type="checkbox" :base-params="girdInfoParams">
                                <yu-xtable-column label="网格编号" width="160px" show-overflow-tooltip
                                                  prop="id"></yu-xtable-column>
                                <yu-xtable-column label="网格名称" width="260px" show-overflow-tooltip
                                                  prop="gridname"></yu-xtable-column>
                                <yu-xtable-column label="所属地域" width="160px"
                                                  prop="orgName"></yu-xtable-column>
                                <yu-xtable-column align="right" width="120px" label="网格级别" data-code="GRID_LEVEL"
                                                  prop="gridlevel"></yu-xtable-column>
                                <yu-xtable-column align="right" label="预估客户数量" width="120px"
                                                  prop="custNum"></yu-xtable-column>
                                <yu-xtable-column align="right" width="200px" label="备注" show-overflow-tooltip
                                                  prop="sectionid"></yu-xtable-column>
                                <yu-xtable-column align="right" label="网格员" width="120px"
                                                  prop="userName"></yu-xtable-column>
                                <yu-xtable-column align="right" label="创建时间"
                                                  prop="createTime"></yu-xtable-column>
                                <yu-xtable-column align="right" label="创建人"
                                                  prop="creator"></yu-xtable-column>
                            </yu-xtable>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-dialog-x title="网格基本信息" :visible.sync="gridInfoVisible" width="1000px" @close="closeFn">
                <yu-xform label-width="120px" v-model="gridBaseInfo" ref="gridBaseInfo">
                    <yu-xform-group :column="4">
                        <yu-xform-item label="创建时间" v-model="gridBaseInfo.createTime" name="createTime" ctype="input" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="创建人" v-model="gridBaseInfo.creator" name="creator" ctype="input" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="最后更新时间" v-model="gridBaseInfo.lastUpdateTime" name="lastUpdateTime" ctype="input" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="最后更新人" v-model="gridBaseInfo.lastUpdater" name="lastUpdater" ctype="input" :disabled="true"></yu-xform-item>
                    </yu-xform-group>
                    <hr/>
                    <yu-xform-group style="margin-top: 35px">
                        <yu-xform-item label="网格编号" v-model="gridBaseInfo.id" name="id" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="网格名称" v-model="gridBaseInfo.gridname"  name="gridname" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="网格类型" v-model="gridBaseInfo.gridscenetype" name="gridscenetype" ctype="select" :colspan="8" :disabled="true" data-code="GRID_TYPE"></yu-xform-item>
                        <yu-xform-item label="经度" v-model="gridBaseInfo.longitude" name="longitude" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="纬度" v-model="gridBaseInfo.latitude" name="latitude" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="网格员" v-model="gridBaseInfo.userName" name="userName" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="上级网格" v-model="gridBaseInfo.upGridName" name="upGridName" ctype="input" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="网格归属机构" v-model="gridBaseInfo.orgId" name="orgId" ctype="yufp-org-tree" :colspan="8" :disabled="true"></yu-xform-item>
                        <yu-xform-item label="房价" v-model="gridBaseInfo.unitPrice" name="unitPrice" ctype="input" :colspan="8" :disabled="unitPriceDis"></yu-xform-item>
                        <yu-xform-item label="户数" v-model="gridBaseInfo.unitNumber" name="unitNumber" ctype="input" :colspan="8" :disabled="unitNumberDis"></yu-xform-item>
                        <yu-xform-item label="楼栋数" v-model="gridBaseInfo.buildNum" name="buildNum" ctype="input" :colspan="8" :disabled="unitNumberDis"></yu-xform-item>
                        <yu-xform-item label="常住人口" v-model="gridBaseInfo.residentPopu" name="residentPopu" ctype="input" :colspan="8" :disabled="unitNumberDis"></yu-xform-item>
                    </yu-xform-group>
                    <div style="float: left;width: 50%;height: 500px">
                        <h3>关键人信息</h3>
                        <yu-xtable ref="keyManTable" request-type="get" row-number :pageable=false style="margin-left: 24px" :data-url="keyManDataUrl" :base-params="udataParams">
                                    <!--              :data-url="keyManDataUrl" :pageable=false style="margin-left: 24px" :data="keyManDataList" :base-params="udataParams"> -->-->
                            <yu-xtable-column label="关键人信息编号"
                                              prop="id" v-if="false">
                            </yu-xtable-column>
                            <yu-xtable-column label="关键人类型" width="120px"  @blur="handleInputBlur"
                                              prop="keymantype" data-code="KEYMAN_TYPE">
                            </yu-xtable-column>
                            <yu-xtable-column label="关键人姓名" width="100px"
                                              prop="keymanname">
                            </yu-xtable-column>
                            <yu-xtable-column label="联系电话" width="100px"
                                              prop="keymanphone">
                            </yu-xtable-column>
                            <yu-xtable-column label="熟悉程度" width="80px"
                                              prop="keymanKnowDegree" data-code="KEYMAN_KNOW_DEGREE">
                            </yu-xtable-column>
                        </yu-xtable>
                        <yu-button type="primary" @click="keyManTableplusFn" icon="el-icon-plus" style="width: 100px;margin-left: 24px" v-if="keyManTableplusButton"></yu-button>
                        <yu-button type="primary" @click="keyManTableminusFn" icon="el-icon-minus" style="width: 100px;margin-left: 24px" v-if="keyManTableminusButton"></yu-button>
                        <yu-button type="primary" @click="keyManTableeditFn" icon="el-icon-edit" style="width: 100px;margin-left: 24px" v-if="keyManTableeditButton"></yu-button>
                    </div>
                    <div style="float: left;width: 49%;height: 500px">
                        <h3>建筑物信息</h3>
                        <yu-xtable  ref="buildTable" request-type="get" row-number
                                   :data-url="buildDataUrl" :pageable=false style="margin-left: 24px" :base-params="udataParams">
                            <yu-xtable-column label="建筑物编号"
                                              prop="id" v-if="false">
                            </yu-xtable-column>
                            <yu-xtable-column label="建筑物名称" width="160px"
                                              prop="unitName">
<!--                                <template scope="scope">-->
<!--                                    <div class="input-box">-->
<!--                                        <el-input size="small"  v-model="scope.row.buildName" ></el-input>-->
<!--                                    </div>-->
<!--                                    <span>{{scope.row.description}}</span>-->
<!--                                </template>-->
                            </yu-xtable-column>
                            <yu-xtable-column label="楼层层数" width="100px"
                                              prop="unitStorey">
                            </yu-xtable-column>
                            <yu-xtable-column label="户数" width="100px"
                                              prop="custNum">
                            </yu-xtable-column>
                        </yu-xtable>
<!--                        <yu-button type="primary" @click="buildTableplusFn" icon="el-icon-plus" style="width: 100px;margin-left: 24px" v-if="buildTableplusButton"></yu-button>-->
                        <yu-button type="primary" @click="buildTableminusFn" icon="el-icon-minus" style="width: 100px;margin-left: 24px" v-if="buildTableminusButton"></yu-button>
                        <yu-button type="primary" @click="buildTableeditFn" icon="el-icon-edit" style="width: 100px;margin-left: 24px" v-if="buildTableeditButton"></yu-button>
                    </div>
                </yu-xform>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="updateGridInfo" v-if="gridInfoModifyButton" v-loading="loadingC">修 改</el-button>
                    <el-button @click="cancelFn">取 消</el-button>
                </div>
            </el-dialog-x>
            <el-dialog-x :title="keyManMap[dialogStatus]" :visible.sync="keyManVisible" width="450px"
                         style="margin-left: -45%">
                <el-row :gutter="10">
                    <el-col :span="20">
                        <yu-xform ref="keyManVisibleForm" label-width="150px" form-type="edit" v-model="keyManGridFormdata"
                                  :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="关键人编号" v-model="keyManGridFormdata.id" name="id"
                                               ctype="input" v-show="false"
                                               placeholder="关键人编号"></yu-xform-item>
                                <yu-xform-item label="关键人类型" v-model="keyManGridFormdata.keymanType" name="keymanType"
                                               data-code="KEYMAN_TYPE" ctype="select"
                                               placeholder="请选择关键人"></yu-xform-item>
                                <yu-xform-item label="关键人姓名" v-model="keyManGridFormdata.keymanName" name="keymanName"
                                               ctype="input" placeholder="关键人姓名" ></yu-xform-item>
                                <yu-xform-item label="联系电话" v-model="keyManGridFormdata.keymanPhone" name="keymanPhone"
                                               ctype="input" placeholder="联系电话" ></yu-xform-item>
                                <yu-xform-item label="熟悉程度" v-model="keyManGridFormdata.keymanKnowDegree" name="keymanKnowDegree"
                                               data-code="KEYMAN_KNOW_DEGREE" ctype="select" placeholder="熟悉程度" ></yu-xform-item>
                            </yu-xform-group>
                        </yu-xform>
                    </el-col>
                </el-row>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="saveKeyMan">保 存</el-button>
                    <el-button @click="keyManVisible = false">取 消</el-button>
                </div>
            </el-dialog-x>
            <el-dialog-x :title="buildInfoMap[dialogStatus]" :visible.sync="buildInfoVisible" width="450px"
                         style="margin-left: -45%">
                <el-row :gutter="10">
                    <el-col :span="20">
                        <yu-xform ref="buildInfoVisible" label-width="150px" form-type="edit" v-model="buildInfoGridFormdata"
                                  :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="建筑物编号" v-model="buildInfoGridFormdata.id" name="id" ctype="input"
                                               placeholder="建筑物编号" v-show="false"></yu-xform-item>
                                <yu-xform-item label="建筑物名称" v-model="buildInfoGridFormdata.unitName" name="unitName"
                                               ctype="input" placeholder="建筑物名称" ></yu-xform-item>
                                <yu-xform-item label="楼层层数" v-model="buildInfoGridFormdata.unitStorey" name="unitStorey"
                                               ctype="input" placeholder="楼层层数" ></yu-xform-item>
                                <yu-xform-item label="户数" v-model="buildInfoGridFormdata.custNum" name="custNum"
                                               ctype="input" placeholder="户数" ></yu-xform-item>
                            </yu-xform-group>
                        </yu-xform>
                    </el-col>
                </el-row>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="saveBuildInfo" v-loading="loadingD">保 存</el-button>
                    <el-button @click="buildInfoVisible = false">取 消</el-button>
                </div>
            </el-dialog-x>

            <el-dialog-x title="分配客户经理" :visible.sync="mgrFPVisible" width="450px">
                        <yu-xform ref="mgrFPVisibleForm" label-width="150px" form-type="edit" v-model="mgrFPFormdata"
                                  :rules="rules">
                            <yu-xform-group :column="1">
                                <yu-xform-item label="客户经理选择" placeholder="请选择客户经理" ctype="yufp-mgr-selector" v-model="mgrFPFormdata.userID"
                                               name="userID"></yu-xform-item>
                            </yu-xform-group>
                        </yu-xform>
                <div slot="footer" align="center">
                    <el-button type="primary" @click="saveMgrFP" v-loading="loadingE">确 定</el-button>
                    <el-button @click="cancelMgrFn">取 消</el-button>
                </div>
            </el-dialog-x>

            <!-- 批量导入dialog style="width: 300px;height: 40px;" -->
<!--            <el-dialog :title="$t('kechuangCompany.pldr')" :visible.sync="importDialogVisible" center>-->
<!--                <div style="padding-left:300px;padding-bottom: 50px;">-->
<!--                    <div class="chooseFileDiv">选择文件:</div>-->
<!--                    <div>-->
<!--                        <yu-upload class="upload-demo" ref="upload" multiple :action="action" :headers="headers" :on-success="onSuccess" :auto-upload="false"-->
<!--                                   :on-error="onError">-->
<!--                            <yu-button slot="trigger" class="chooseButton" style="width: 300px;height: 40px;background: #fff;color:#000;">请选择</yu-button>-->
<!--                        </yu-upload>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="yu-grpButton">-->
<!--                    <yu-button type="primary" @click="submitUpload">上传</yu-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
        </el-tab-pane>
    </el-tabs>
</div>
